<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">Colors</h3>
</div>
<div class="p-md">
  <h5 class="no-margin m-b font-bold">Background options</h5>
  <div class="row row-sm m-b">
    <div class="col-md-6">
      <div class="row row-sm">
        <div class="col-xs-6 col-sm-3">
          <div class="panel">       
            <div class="box bg-primary">
              <div class="box-col lt"></div>
              <div class="box-col p-v-md"></div>
              <div class="box-col dk"></div>
            </div>
            <div class="panel-body text-center">
              bg-primary
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3">
          <div class="panel">       
            <div class="box bg-info">
              <div class="box-col lt"></div>
              <div class="box-col p-v-md"></div>
              <div class="box-col dk"></div>
            </div>
            <div class="panel-body text-center">
              bg-info
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3">
          <div class="panel">       
            <div class="box bg-success">
              <div class="box-col lt"></div>
              <div class="box-col p-v-md"></div>
              <div class="box-col dk"></div>
            </div>
            <div class="panel-body text-center">
              bg-success
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3">
          <div class="panel">       
            <div class="box bg-warning">
              <div class="box-col lt"></div>
              <div class="box-col p-v-md"></div>
              <div class="box-col dk"></div>
            </div>
            <div class="panel-body text-center">
              bg-warning
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row row-sm">
        <div class="col-xs-6 col-sm-3">
          <div class="panel">       
            <div class="box bg-light">
              <div class="box-col lt"></div>
              <div class="box-col p-v-md"></div>
              <div class="box-col dk"></div>
            </div>
            <div class="panel-body text-center">
              bg-light
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3">
          <div class="panel">
            <div class="box bg-dark">
              <div class="box-col lt"></div>
              <div class="box-col p-v-md"></div>
              <div class="box-col dk"></div>
            </div>
            <div class="panel-body text-center">
              bg-dark
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3">
          <div class="panel">       
            <div class="box bg-black">
              <div class="box-col lt"></div>
              <div class="box-col p-v-md"></div>
              <div class="box-col dk"></div>
            </div>
            <div class="panel-body text-center">
              bg-black
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3">
          <div class="panel">       
            <div class="box bg-danger">
              <div class="box-col lt"></div>
              <div class="box-col p-v-md"></div>
              <div class="box-col dk"></div>
            </div>
            <div class="panel-body text-center">
              bg-danger
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <h5 class="no-margin font-bold">Border options</h5>
  <p>
    color: b-t[top, right, bottom, left]-primary[primary, info, success, warning, danger, dark, black]<br>
    width: b-t[top, right, bottom, left]-2x[2x, 3x, 4x, 5x]
  </p>
  <div class="m-b">
    <div class="panel p r-3x b-t-primary inline">b-t-primary</div>
    <div class="panel p r-3x b-r-info inline">b-r-info</div>
    <div class="panel p r-3x b-b-success inline">b-b-success</div>
    <div class="panel p r-3x b-l-warning inline">b-l-warning</div>
    <div class="panel p r-3x b-t-dark b-t-2x inline">b-t-2x</div>
    <div class="panel p r-3x b-r-black b-r-3x inline">b-r-3x</div>
    <div class="panel p r-3x b-b-info b-b-4x inline">b-b-4x</div>
    <div class="panel p r-3x b-l-success b-l-5x inline">b-l-5x</div>
  </div>
  <h5 class="no-margin font-bold">Text options</h5>
  <p>text-primary[primary, info, success, warning, danger][-lt[lt, dk]]</p>
  <div class="m-b-lg">
    <span class="text-primary m-r-xs">text-primary</span><span class="text-info-lt m-r-xs">text-info-lt</span><span class="text-success-dk">text-success-dk</span>
  </div>
  <h5 class="no-margin m-b font-bold">Usage</h5>
  <div class="row">
    <div class="col-sm-4">
      <div class="panel no-border bg-primary">
        <div class="panel-heading lt text-lt">
          <span class="pull-right">60%</span>
          Total Earnings
        </div>
        <div class="progress progress-xxs no-margin no-radius dk">
          <div class="progress-bar bg-info lt" style="width:60%"></div>
        </div>
        <div class="panel-body p-v-md">
          <div class="pull-left pull-none-sm p-h text-center m-r m-v-xs">
            <i class="fa fa-dollar fa-4x text-muted"></i>
          </div>
          <div class="clear">
            <div class="text-2x font-bold text-lt">432,000</div>
            <small class="text-dk">Caculated in 19:30 Thu</small>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="panel no-border bg-success">
        <div class="panel-heading lt text-lt">
          <span class="pull-right">50%</span>
          New Visits
        </div>
        <div class="progress progress-xxs no-margin no-radius dk">
          <div class="progress-bar bg-light" style="width:50%"></div>
        </div>
        <div class="panel-body p-v-md">
          <div class="pull-left pull-none-sm p-h text-center m-r m-v-xs">
            <i class="fa fa-globe fa-4x text-lt"></i>
          </div>
          <div class="clear">
            <div class="text-2x font-bold text-lt">386,000</div>
            <small class="text-dk">Peaked at 14:30 Mon</small>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="panel b-a bg-light dk">
        <div class="panel-heading bg text-lt">
          <span class="pull-right">80%</span>
          Helpdesk
        </div>
        <div class="progress progress-xxs no-margin no-radius bg-white">
          <div class="progress-bar bg-info no-radius" style="width:80%"></div>
        </div>
        <div class="panel-body p-v-md">
          <div class="pull-left pull-none-sm p-h text-center r r-2x lt m-r m-v-xs m-l-xs">
            <i class="fa fa-question fa-4x text-muted"></i>
          </div>
          <div class="clear">
            <div class="text-2x font-bold text-black">96,000</div>
            <small class="text-dk">20% questions not answered</small>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="panel no-border bg-info">
        <div class="panel-heading lt text-lt">
          Revenue
          <div class="text-muted">Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="progress progress-xxs no-margin no-radius dk">
          <div class="progress-bar bg-white" style="width:60%"></div>
        </div>
        <div class="panel-body p-v-md">
          <div class="pull-right pull-none-sm p-h text-center m-r m-v-xs">
            <i class="fa fa-dollar fa-4x text-info-dk"></i>
          </div>
          <div class="clear m-l">
            <div class="text-2x font-bold text-lt">60%</div>
            <small class="text-dk">lectus arcu malesuada sem</small>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="panel no-border bg-warning dk">
        <div class="panel-heading bg text-lt">
          Affiliate
          <div class="text-muted">Phasellus at ultricies neque.</div>
        </div>
        <div class="progress progress-xxs no-margin no-radius dk">
          <div class="progress-bar bg-white" style="width:75%"></div>
        </div>
        <div class="panel-body p-v-md">
          <div class="pull-right pull-none-sm p-h text-center m-r m-v-xs">
            <i class="fa fa-dollar fa-4x text-warning-lt"></i>
          </div>
          <div class="clear m-l">
            <div class="text-2x font-bold text-lt">75%</div>
            <small class="text-dk">Donec eleifend condimentum</small>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="panel no-border bg-black">
        <div class="panel-heading lt text-lt">
          Earnings
          <div class="text-muted">Mauris convallis mauris</div>
        </div>
        <div class="progress progress-xxs no-margin no-radius dk">
          <div class="progress-bar bg-white" style="width:55%"></div>
        </div>
        <div class="panel-body p-v-md">
          <div class="pull-right pull-none-sm p-h text-center m-r m-v-xs">
            <i class="fa fa-dollar fa-4x text-success-lt"></i>
          </div>
          <div class="clear m-l">
            <div class="text-2x font-bold text-lt">55%</div>
            <small class="text-muted">Dapibus porta quam lacus eu</small>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="panel b-info">
        <div class="panel-heading lt text-lt">
          <span class="pull-right">30%</span>
          Comments
        </div>
        <div class="progress progress-xxs no-margin no-radius dk">
          <div class="progress-bar bg-info lt" style="width:30%"></div>
        </div>
        <div class="panel-body p-v-md">
          <div class="pull-left pull-none-sm p-h text-center m-r m-v-xs">
            <i class="glyphicon glyphicon-comment text-4x text-muted"></i>
          </div>
          <div class="clear">
            <div class="text-2x font-bold text-black">67,000</div>
            <small class="text-dk">Some text here</small>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="panel b-success">
        <div class="panel-heading lt text-lt">
          <span class="pull-right">45%</span>
          Transaction
        </div>
        <div class="progress progress-xxs no-margin no-radius">
          <div class="progress-bar bg-success" style="width:50%"></div>
        </div>
        <div class="panel-body p-v-md">
          <div class="pull-left pull-none-sm p-h text-center m-r m-v-xs">
            <i class="glyphicon glyphicon-random text-4x text-muted"></i>
          </div>
          <div class="clear">
            <div class="text-2x font-bold text-black">145,000</div>
            <small class="text-dk">Total transaction made</small>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="panel b-a">
        <div class="panel-heading bg text-lt">
          <span class="pull-right">10%</span>
          Tags
        </div>
        <div class="progress progress-xxs no-margin no-radius bg-white">
          <div class="progress-bar bg-light no-radius" style="width:10%"></div>
        </div>
        <div class="panel-body p-v-md">
          <div class="pull-left pull-none-sm p-h text-center r r-3x lt m-r m-v-xs m-l-xs">
            <i class="glyphicon glyphicon-tag text-4x text-muted"></i>
          </div>
          <div class="clear">
            <div class="text-2x font-bold text-black">4,530</div>
            <small class="text-dk">10% of the posts are tagged</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>